<!-- 我的预约 -->
<template>
	<view class="my-appointment">


		<!-- <view class="current-user-card">
			{{currentUserCard.names}} (ID: {{currentUserCard.numcard}})
			<text style="float: right;" @click="openPopup">切换</text>
		</view> -->
		<!-- <view class="tabs-wrapper">
			<liuyuno-tabs :tabData="tabsData" :defaultIndex="1" @tabClick='tabClick' />
		</view> -->

		<uni-card v-for="(item, index) in dataList" :key="index" @click="goToAppointmentDetail(item)">
			<view slot="title" class="card-titles">
				<p style="float: left;"><u-icon :color="'#4caf50'" name="order" :label="'单号：' + item.ordersn"></u-icon>
				</p>
				<p style="float: right; font-size: .8rem;" v-html="orderStatus(item.OrderStatus)"></p>
				<div class="clearfix"></div>
			</view>
			<view class="uni-body">
				<p>预约科室：{{item.dept_name}}</p>
				<p>预约医生：{{item.doc_name}}</p>
				<p>付款金额：￥{{item.money}}</p>
			</view>
			<view slot="actions" class="card-actions">
				<text style="float: left;">{{item.schedule_date}}</text>
				<!-- <view style="float: right;">
					<u-button type="default" size="mini" text="查看详情" @click="goToAppointmentDetail(item)"></u-button>
				</view> -->
				<div class="clearfix"></div>
			</view>
		</uni-card>

		<!-- <view class="list-wrapper">
			<view class="item" v-for="(item, index) in dataList" :key="index" @click="goToAppointmentDetail(item)">
				<p class="time">预约就诊时间：{{item.RegistrationTime.substring(0, item.RegistrationTime.length - 8)}}
					{{item.VisitPeriod}}
				</p>
				<uni-tag class="float-right" style="margin-top: 5px;" :circle="true" :text="item.TreatmentState"
					:type="TreatmentStateType(item.TreatmentState)" size="mini" />
				<div class="clearfix"></div>
				<p>医生：{{item.Doctor}}</p>
				<p>科室：{{item.Department}}</p>
			</view>
		</view> -->

		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content">
				<view class="card-item" v-for="(item, index) in userCardList" :key="index">
					<p>{{item.names}}（ID:{{item.numcard}}）</p>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import liuyunoTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
	export default {
		components: {
			liuyunoTabs
		},
		data() {
			return {
				currentUserCard: {
					names: '',
					numcard: ''
				},
				tabsData: [{
						state: 1,
						name: '全部'
					},
					{
						state: 2,
						name: '已预约'
					},
					{
						state: 3,
						name: '已取消'
					},
				],
				userCardList: [],
				dataList: []
			}
		},
		onLoad() {

		},
		onShow() {
			this.api_cardlist()
			this.api_hislist()
			this.currentUserCard = uni.getStorageSync('current_user_card')
		},
		methods: {
			openPopup() {
				this.$refs.popup.open('bottom')
			},

			orderStatus(status) {
				if (status == '已退号') {
					return '<span style="color: #f44336">' + status +'</span>'
				} else if (status == '已签到待接诊') {
					return '<span style="color: #4caf50">' + status +'</span>'
				} else {
					return '<span style="color: #757575">' + status +'</span>'
				}
			},

			TreatmentStateType(val) {
				if (val == '未就诊') {
					return 'default'
				} else if (val = '已就诊') {
					return 'success'
				}
			},

			goToAppointmentDetail(item) {
				uni.navigateTo({
					url: '/pagesB/tabbar/myCenter/appointmentDetail',
					success: (res) => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('detail', {
							data: item
						})
					}
				})
			},

			api_cardlist() {
				let openid = uni.getStorageSync('openid')
				this.$app._post_form("entry/wxapp/apipatient.cardlist", {
					'openid': openid
				}, (res) => {
					if (res.status === 1) {
						this.userCardList = res.data
					}
				})
			},
			api_hislist() {
				let currentUserCard = uni.getStorageSync('current_user_card')
				let openid = uni.getStorageSync('openid')
				this.$app._post_form2("entry/wxapp/apiregistration.orderlist", {
					"openid": openid,
					"cardid": currentUserCard.numcard,
					"pageidx": "1",
					"pagesize": "10",
					// "starttime": "2023-07-01 00:00:00",
					// "endtime": "2024-12-31 00:00:00"
				}, (res) => {
					console.log(res)
					if (res.status === 1) {
						this.dataList = res.data
					}
				})
			}
		}
	}
</script>

<style>
	>>>._item._active {
		color: #2096F3 !important;
	}

	>>>._underline {
		background-color: #2096F3 !important;
	}
</style>

<style scoped lang="scss">
	.my-appointment {
		// padding: 15px;
		padding-bottom: 10px;

		.card-titles {
			border-bottom: 1px #EBEEF5 solid;
			padding: 10px;
		}

		.card-actions {
			border-top: 1px #EBEEF5 solid;
			padding: 10px;
			color: #616161;
		}

		.current-user-card {
			width: 100%;
			line-height: 40px;
			padding: 5px 10px 5px 10px;
			color: #fff;
			font-size: .8rem;
			background-image: linear-gradient(to right, #41C177, #c8e6c9);
			box-sizing: border-box;
			border-radius: 6px;
			margin-bottom: 5px;
		}

		.tabs-wrapper {
			background-color: #fff;
		}

		.list-wrapper {

			.item {
				padding: 10px;
				background-color: #fff;
				border-radius: 8px;
				color: #757575;
				font-size: .8rem;
				margin-bottom: 5px;

				p {
					line-height: 25px;
				}

				.time {
					color: #ff9800;
					float: left;
				}
			}
		}

		.popup-content {
			text-align: center;

			.card-item {
				height: 40px;
				line-height: 40px;
				color: #757575;
				font-size: .8rem;
			}
		}
	}
</style>